<template>
    <div class="nav-bar">
        <div class="nav-bar-container">
            <div class="nav-center">
                <div class="content">
                    <div class="nav-menu">
                        <div class="nav-menu-container" @click="tabChange($event)">
                            <div :class="['nav-menu-item',tabIndex == 0 && 'nav-menu-active']" data-index='0'>
                                首页
                            </div>
                            <div :class="['nav-menu-item',tabIndex == 1 && 'nav-menu-active']" data-index='1'>
                                解决方案
                            </div>
                            <div :class="['nav-menu-item','productTab',tabIndex == 2 && 'nav-menu-active']" data-index='2' @mouseenter="mousedown" @mouseleave="mouseleave">
                                产品介绍
                            </div>
                            <div :class="['nav-menu-item',tabIndex == 3 && 'nav-menu-active']" data-index='3'>
                                营销工具
                            </div>
                            <div :class="['nav-menu-item',tabIndex == 4 && 'nav-menu-active']" data-index='4'>
                                最新资讯
                            </div>
                            <div :class="['nav-menu-item',tabIndex == 5 && 'nav-menu-active']" data-index='5'>
                                关于我们
                            </div>
                        </div>
                        <!-- <div class="nav-line-wrap" :style="'left:'+tabIndex*140+'px;'">
                            <div class="nav-line"></div>
                        </div> -->
                    </div>
                </div>
            </div>
            <div class="nav-left">
                <div class="nav-log"></div>
            </div>          
            <div class="nav-right">
                <div class="button-group">
                    <div class="button-item" @click="showDialog">
                        注册
                    </div>
                    <div class="button-item">
                        登录
                        <div class="log-menu">
                            <ul>
                                <router-link to="">
                                    <li>企汇通</li>
                                </router-link>
                                <router-link to="">
                                    <li>企汇通备线1</li>
                                </router-link>
                                <router-link to="">
                                    <li>企汇通营销版备线</li>
                                </router-link>
                                <router-link to="">
                                    <li>云梯</li>
                                </router-link>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="old-website">
                    <router-link to="">
                        <span class="old-website-text">
                            旧官网
                        </span>
                    </router-link>
                </div>
            </div>
        </div>
        <div class="product-box" :style="'height:'+(showProduct ? '10.786rem' :'')">
            <div class="product-box-left">
                <div class="product-caption">
                    产品模块
                </div>
                <div class="product-container">
                    <ul>
                        <li class="product-item" @click="navigatorTo(0)">
                            <div class="iconfont guanli"></div>
                            <div class="product-item-container">
                                <b>智慧管理</b>
                                <p>无纸化智慧管理系统，便捷高效</p>
                            </div>
                        </li>
                        <li class="product-item" @click="navigatorTo(1)">
                            <div class="iconfont ip2"></div>
                            <div class="product-item-container">
                                <b>IP打造</b>
                                <p>宣传推广，社交互动，私域流量</p>
                            </div>
                        </li>
                        <li class="product-item" @click="navigatorTo(2)">
                            <div class="iconfont wangluochuanbo"></div>
                            <div class="product-item-container">
                                <b>社交电商</b>
                                <p>万店联盟，资源多渠道持续变现</p>
                            </div>
                        </li>
                    </ul>
                </div>

            </div>
            <div class="product-box-right">
                <img src="../assets/imgs/product/dropmenu_ikon.png" alt="">
            </div>
        </div>
        <hoomregister :show-dialog="showRegisterDialog" @close="closeDialog" />
    </div>
</template>
<script>
import hoomregister from '@/components/hoomregister.vue'

export default {
    props:['activeIndex'],
    components:{
        hoomregister
    },
    data(){
        return{
            tabIndex:this.activeIndex,
            showRegisterDialog:false,
            showProduct:false,
            // showProduct:true,
        }
    },
    methods:{
        tabChange(e){
            const index = e.target.dataset.index;
            // console.log(index);
            // this.tabIndex = index;
            if(index == 4) return alert('暂未开通!')
            const pathArr = ['/','/scheme','/product','/marketing','','/aboutus'];
            this.$router.push(pathArr[+index]);
        },
        closeDialog(){
            this.showRegisterDialog = false;
        },
        showDialog(){
            this.showRegisterDialog = true;
        },
        mousedown(){
            this.showProduct = true;
        },
        mouseleave(){
            this.showProduct = false;
        },
        navigatorTo(index){
            const pathArr = ['qht','ipsystem','mbmh'];
            this.$router.push('/product/'+pathArr[index])
        }
    },
}
</script>
<style lang="less" scoped>
// @import '../assets/css/variable.less';
@crem:1/28*1rem;
.productTab{
    position: relative;
    z-index: 20;
}
.nav-bar{
    position: relative;
    min-width: 768px;
    
    .product-box{
        position: absolute;
        top:100%;
        left: 0;
        width: 100%;
        // height: 302px;
        height: 0;
        z-index: 15;
        background: #fff;
        box-shadow: 0 -20px 80px -80px black;
        // background:  #fff url('../assets/imgs/product/dropdown_word.png') left -80 * @crem center no-repeat;
        background:  #fff url('../assets/imgs/product/dropdown_word.png') left -30 * @crem center no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding-left: 304 * @crem;
        display: flex;
        flex-flow: row nowrap;
        transition: height .3s;
        .product-box-left{
            margin-top: 50 * @crem;
            width: 934 * @crem;
            overflow: hidden;
            .product-caption{
                height: 30 * @crem;
                text-align: left;
                font-size: 18 * @crem;
                color: #C0C0C0;
                font-weight: 500;
                line-height: 30 * @crem;
                border-bottom: 1 * @crem dashed #D4A5FF;

            }
            .product-container{
                padding-top: 35 * @crem;
                ul{
                    display: flex;
                    flex-flow: row nowrap;
                    .product-item{
                        flex: 1;
                        display: flex;
                        flex-flow: row nowrap;
                        align-items: center;
                        cursor: pointer;
                        .iconfont{
                            width: 50 * @crem;
                            height: 50 * @crem;
                            margin-right: 16 * @crem;
                            line-height: 50 * @crem;
                            text-align: center;
                            font-size: 50 * @crem;
                            color: #9B88EC;
                        }
                        .product-item-container{
                            height: 100%;
                            display: flex;
                            flex-flow: column nowrap;
                            justify-content: center;
                            align-items: flex-start;
                            text-align: left;
                            b{
                                font-size: 18 * @crem;
                                color: #6D6C6C;
                                font-weight: 500;
                            }
                            p{
                                margin-top: 4 * @crem;
                                color: #7F7F7F;
                                font-size: 14 * @crem;
                            }
                        }
                    }
                }
            }
        }
        
        .product-box-right{
            padding-left: 155 * @crem;
            margin-top: 22 * @crem;
            overflow: hidden;
            img{
                width: 330 * @crem;
                height: 242 * @crem;
            }
        }
    }
    
    .product-box::before{
        content: '';
        display: block;
        width: 140 * @crem;
        height: 100 * @crem;
        // height: 10.786rem;
        position: absolute;
        top: -100 * @crem;
        left: 650 * @crem;
        cursor: pointer;
    }
    .product-box::after{
        content: '';
        display: block;
        width: 100%;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
    }
    .product-box:hover{
        height: 10.786rem;
        // opacity:1;
    }
    @media screen and(max-width: 1680px) {
        .product-box{
            background:  #fff url('../assets/imgs/product/dropdown_word.png') left -80 * @crem center no-repeat;
            background-size: 100% 100%;
        }
    }
    @media screen and(max-width: 1024px) {
        .product-box{
            background:  #fff url('../assets/imgs/product/dropdown_word.png') left -50 * @crem center no-repeat;
            background-size: 100% 100%;
        }
    }
}
.nav-bar-container{
    box-sizing: border-box;
    height: 100 * @crem;
    width: 100%;
    // overflow: hidden;
    .nav-menu{
        padding-top: 4 * @crem;
        box-sizing: border-box;
        height: 62 * @crem;
        position: relative;
        
        .nav-menu-container{
            height: 50 * @crem;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
        }
        .nav-menu-item{
            width: 140 * @crem;
            height: 100%;
            line-height: 50 * @crem;
            color: #060606;
            font-size: 22 * @crem;
            cursor: pointer;
            position: relative;
            white-space: nowrap;
        }
        .nav-menu-active{
            color: #4A96EA;
        }
        .nav-menu-active::before{
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%);
            height: 4 * @crem;
            width: 65 * @crem;
            border-radius: 2 * @crem;
            background-color: #4A96EA;
        }
    }
    .nav-center{
        box-sizing: border-box;
        float: left;
        width: 100%;
        height: 100%;
    }
    .content{
        box-sizing: border-box;
        margin-left:  350 * @crem;
        margin-right:  420 * @crem;
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 55 * @crem;
    }
    .nav-left{
        box-sizing: border-box;
        float: left;
        margin-left: -100%;
        width: 350 * @crem;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .nav-log{
            width: 160 * @crem;
            height: 54 * @crem;
            background: url('../assets/imgs/home/yunhao_log.png') center no-repeat;
            background-size: 100%;
        }
    }
    .nav-right{
        box-sizing: border-box;
        float: left;
        width: 420 * @crem;
        margin-left: -420 * @crem;
        height: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        .button-group{
            width: 200 * @crem;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            
            .button-item{
                box-sizing: border-box;
                width: 90 * @crem;
                height: 45 * @crem;
                border-radius: 28 * @crem;
                text-align: center;
                line-height: 45 * @crem;
                font-size: 22 * @crem;
                position: relative;
            }
            .button-item:first-child{
                background: linear-gradient(87deg, #26B0F9 0%, #0893DE 100%);
                color: #fff;
            }
            .button-item:last-child{
                border: 2px solid #4A96EA;
                background-color: #fff;
                color: #4A96EA;
            }
            .button-item:last-child:hover .log-menu{
                // display: block;
                height: 300 * @crem;

            }
            .log-menu{
                // display: none;
                width: 250 * @crem;
                height: 0;
                // height: 300 * @crem;
                box-sizing: border-box;
                overflow: hidden;
                padding-top: 22 * @crem;
                position: absolute;
                left: 50%;
                top: 100%;
                transform: translateX(-50%);
                margin: auto;
                z-index: 30;
                border-radius: 0px 0px 40 * @crem 40 * @crem;
                transition: height .3s;
                .menu-item-wrap{
                    background: #fff;
                    height: 100%;
                    width: 100%;
                    margin: 0;
                }
                ul{
                    box-sizing: border-box;
                    padding-top: 10px;
                    background: #fff;
                    height: 100%;
                    width: 100%;
                    margin: 0;
                    overflow: hidden;
                }
                li{
                    color: #3F3F3F;
                    font-size: 20 * @crem;
                    line-height: 20 * @crem;
                    margin-top: 35 * @crem;
                    cursor: pointer;
                }
            }
            .log-menu:hover{
                height: 200 * @crem;

            }
        }
        .old-website{
            box-sizing: border-box;
            width: 130 * @crem;
            height: 100%;
            background: url('../assets/imgs/home/nav_right.png') no-repeat;
            background-size: cover;
            position: relative;
        }
        .old-website-text{
            position: absolute;
            top:15 * @crem;
            right: 8 * @crem;
            color: #939393;
            font-size: 16 * @crem;
            font-weight: 400;
            transform: rotate(42deg);
        }
        @media screen and (max-width: 1024px){
            .old-website-text{
                top:15 * @crem;
                right: -2px;
                transform: scale(.8) rotate(42deg);
            }
        }
    }
}
@media screen and (max-width: 1024px){
    .product-item-container,.nav-menu-item{
        transform: scale(.8);
        
    }
}
</style>